import { Box, List, ListItem, ListItemText, Typography } from '@mui/material';
import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { menuConfig, MenuItem } from '../config/menuConfig';

const SideMenu: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();

  const getCurrentMenuItems = (): MenuItem[] => {
    const path = location.pathname.split('/')[1];
    return menuConfig[path] || [];
  };

  const getPageTitle = (): string => {
    const path = location.pathname.split('/')[1];
    switch (path) {
      case 'javascript-basics':
        return 'JavaScript基础';
      case 'javascript-advanced':
        return 'JavaScript进阶';
      case 'react-basics':
        return 'React基础';
      case 'react-advanced':
        return 'React进阶';
      case 'data-structures':
        return '数据结构';
      case 'algorithms':
        return '算法';
      default:
        return '';
    }
  };

  const menuItems = getCurrentMenuItems();

  if (menuItems.length === 0 || location.pathname === '/todo') {
    return null;
  }

  return (
    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <Typography
        variant="h6"
        sx={{
          p: 2,
          borderBottom: '1px solid #e0e0e0',
          backgroundColor: '#fff',
          position: 'sticky',
          top: 0,
          zIndex: 1,
          fontSize: '1.1rem',
          fontWeight: 500,
        }}
      >
        {getPageTitle()}
      </Typography>
      <List
        component="nav"
        sx={{
          py: 1,
          flexGrow: 1,
          overflowY: 'auto',
          '&::-webkit-scrollbar': {
            width: '4px',
          },
          '&::-webkit-scrollbar-track': {
            background: '#f1f1f1',
          },
          '&::-webkit-scrollbar-thumb': {
            background: '#888',
            borderRadius: '2px',
          },
        }}
      >
        {menuItems.map(item => (
          <ListItem
            key={item.path}
            button
            selected={location.pathname === item.path}
            onClick={() => navigate(item.path)}
            sx={{
              '&.Mui-selected': {
                backgroundColor: '#e3f2fd',
                borderLeft: '4px solid #1976d2',
                '&:hover': {
                  backgroundColor: '#e3f2fd',
                },
              },
              '&:hover': {
                backgroundColor: '#f0f7ff',
              },
              pl: 2,
              minHeight: '48px',
            }}
          >
            <ListItemText
              primary={item.label}
              sx={{
                '& .MuiTypography-root': {
                  fontSize: '0.9rem',
                  fontWeight: location.pathname === item.path ? 600 : 400,
                },
              }}
            />
          </ListItem>
        ))}
      </List>
    </Box>
  );
};

export default SideMenu;
